<template>
	<div class="body-style">
		<div class="body-bottom customer_data">
			<el-card shadow="always" class="el-cart-reset">
				<div class="subCfgList_title">
					<h3>客户资料</h3>
					<div class="title_ls"></div>
				</div>
				<el-row>
					<el-col :span="24" >
							<el-form :model="pageData.dataForm" ref="pageData.dataForm" label-width="100px" size="mini">
								<el-form-item style="margin-bottom: 10px;" v-for="item in pageData.cusFieldList" :key="item.colName" :prop="item.colName" :label="item.colValue"
									:class="{  
										'blueItem': item.colName === 'cusPhone' || item.colName === 'cusOpenId',  
										'anotherClass': (item.colName === 'cusVisitorId' || item.colName === 'cusOpenId') && (pageData.sessionIfo.callType=='1' || pageData.sessionIfo.callType=='2')
									}">
									<el-input v-model="pageData.dataForm[item.colName]" v-if="item.colType === '0' || item.colType === '5'" type="text"></el-input>
									<el-input v-model="pageData.phoneNumber" v-if="item.colType === '1'" type="tel" disabled></el-input>
									<el-date-picker v-model="pageData.dataForm[item.colName]" v-if="item.colType === '2'" size="mini" type="datetime" placeholder="选择日期时间" style="width: 160px;">
									</el-date-picker>
									<el-input v-model="pageData.dataForm[item.colName]" v-if="item.colType === '3'" type="email"></el-input>
									<el-input v-model="pageData.dataForm[item.colName]" v-if="item.colType === '4'" type="textarea"></el-input>
								</el-form-item>
							</el-form>
						<div style="text-align: center;clear: both;">
							<el-button type="primary" icon="el-icon-search" size="mini" @click="cusSelectHandler">查询</el-button>
							<el-button type="success" icon="el-icon-success" size="mini" @click="cusSaveorUpdateClickHandler">保存</el-button>
							<el-button type="warning" icon="el-icon-delete"  size="mini" @click="cusClearClickHandler">清空</el-button>
							<!-- <el-button type="info" icon="el-icon-unlock" size="mini" @click="unlockHandler">解绑</el-button> -->
						</div>
					</el-col>
				</el-row>
				<!-- 客户资料子模块 -->
				<div v-if="pageData.subCfgList && pageData.subCfgList.length != 0">
				<div class="subCfgList_title">
					<h3>子模块资料</h3>
					<div class="subCfgList_title_popover">
						<el-popover placement="top-start" trigger="hover" content="如需修改子模块客户资料，请双击对应数据进行修改">
							<span class="el-icon-question" slot="reference"></span>
						</el-popover>
					</div>
					<div class="title_ls"></div>
				</div>

				<div  v-for="(item1 ,idx1) in pageData.subCfgList" :key="idx1">
					<div style="display: inline-block;"><span style="font-size: 14px;color: #606266;">{{item1.name}}</span></div>
					&nbsp;&nbsp;&nbsp;
					<el-button type="primary" @click="addCustomerSubHandle(item1)" size="mini" round>新建</el-button>
					<el-table  :data="item1.subInfoList" style="width: 100%;"  @row-dblclick="(row,column,e)=>dbSelected(row,column,e,item1)">
						<el-table-column v-for="(value ,_key) in item1.subCfgMap" :key="_key" :prop="_key" header-align="center" align="center" :label="value">
							<template slot-scope="scope">
								<el-popover placement="left" :content="scope.row[_key]" trigger="hover">
									<span slot="reference">
						              <div style="height: 20px;">{{scope.row[_key]}}</div>
						            </span>
								</el-popover>
							</template>
						</el-table-column>
					</el-table>
				</br>
				</div>
				</div>
				<div v-if="tagsList.length!=0">
					<h3>客户标签</h3>
					<div class="title_ls"></div>
					<el-form>
						<el-form-item style="width: 50%;float: left;">
							<customerTagsReadonly :tagsList="tagsList"></customerTagsReadonly>
						</el-form-item>
						<!-- <el-form-item style="width: 50%;float: left;padding-left: calc(25% - 100px);">
							<customerLiquidfill :labelRate="labelRate" :customerPhoneNumber="customerPhoneNumber"></customerLiquidfill>
						</el-form-item> -->
					</el-form>
				</div>

			</el-card>
		</div>
		<el-dialog title="确认修改" :visible.sync="dialogCustomerUpdateFormVisible">
			<div style="display: flex;">
				<label style="width: 100px;">修改备注:</label>
				<el-input type="textarea" v-model="updateCustomerDesc"></el-input>
			</div>
		  <div slot="footer" class="dialog-footer">
		    <el-button @click="dialogCustomerUpdateFormVisible = false">取 消</el-button>
		    <el-button type="primary" @click="saveCustomerHandle()">确 定</el-button>
		  </div>
		</el-dialog>
		<!--新建子模块客户资料-->
		<sub-info-add ref="subInfoAdd" @refreshDataList="getCustomerInfo"></sub-info-add>
		<sub-info-update ref="subInfoUpdate" @refreshDataList="getCustomerInfo"></sub-info-update>
	</span>

	</div>
</template>

<script>
	import dateUtil from '@/utils/dateUtil'
	// import Icon from '@/icons'
	import SubInfoAdd from './cc-customer-sub-info-add'
	import SubInfoUpdate from './cc-customer-sub-info-update'
	import customerTagsReadonly from './cc-customer-component-tags-readonly'
	// import customerLiquidfill from './cc-customer-component-echarts-liquidfill'
	export default {
		data() {
			type: Object
			return {
				pageDatas:[],
				pageData:{
					dataForm: {},
				},
				sessionId:"",
				channel:"",
				// 修改客户资料
				dialogCustomerUpdateFormVisible:false,
				updateCustomerDesc:'',
				updateCustomerTempData:[],
				page: 1,
				limit: 10,
				totalPage: 0,
				tagsList: [],
				labelRate: '',
				channel:'',
				customerPhoneNumber:'',
			}
		},
		filters: {
			formatDateTime(timestamp) {
				return dateUtil.formatDateTime(timestamp)
			},
			formatTimer(timestamp) {
				return dateUtil.formatTimer(timestamp)
			},
			ellipsisSmall(value) {
				if(!value) return ''
				if(value.length > 20) {
					return value.slice(0, 20) + '...'
				}
				return value
			},
			ellipsisBig(value) {
				if(!value) return ''
				if(value.length > 20) {
					return value.slice(0, 20) + '...'
				}
				return value
			},
		},
		components: {
			// ccMcsSessionInfo,
			customerTagsReadonly,
			//customerLiquidfill,
			SubInfoAdd,
			SubInfoUpdate
		},
		created() {
			console.log("弹屏init")
			console.log(window.location,':window.location.search')
			var search = window.location.href.split('?')[1];
			var customerPhoneNumber;
			var channel;
			if(search){
				var param = search.split('&');
				param.forEach((elem,index) => {
					//获取弹屏url传过来的参数
					if(elem.indexOf("customerPhoneNumber") != -1){
						customerPhoneNumber = elem.split("=")[1];
						console.log("号码为==>",customerPhoneNumber)
					}
					if(elem.indexOf("channel") != -1){
						channel = elem.split("=")[1];
						console.log("channel为==>",channel)
					}
				});
			}
			this.customerPhoneNumber = customerPhoneNumber;
			this.initData(customerPhoneNumber);
		},
		methods: {
			//初始化数据
			initData(phoneNumber){
				var obj = this.getSessionPopInfo(phoneNumber);//是否存在数据
				if(obj == null){
					obj = new Object();
					obj.phoneNumber = phoneNumber;
					obj.sessionIfo = new Object();
					obj.cusFieldList = [];
					obj.dataForm = new Object();
					this.pageDatas.push(obj);
					this.pageData = obj;
					this.getCustomerInfo(phoneNumber);
				}
			},
			//把列表数据存入pageDatas
			getSessionPopInfo(phoneNumber){
				var obj=null;
				for(var i=0;i<this.pageDatas.length;i++){
					var _d=this.pageDatas[i];
					if(_d.phoneNumber==phoneNumber){
						obj=_d;
						this.pageData=obj;
						break;
					}
				}
				return obj;
			},
			//获取pageDatas里每一个具体数据
			getCustomerInfo(popInfoObj) {
				var that = this
				if(!popInfoObj){
					popInfoObj=this.getSessionPopInfo(this.customerPhoneNumber);
				}
				var channel = this.channel;
				var _dataForm = popInfoObj.dataForm;
				if(!_dataForm){
					_dataForm = new Object();
				}
				this.$http.post('/cc/customer/manage/selectOne', {
					cusPhone:this.customerPhoneNumber,
				}).then(resp => {
					console.log("resp===>",resp)
					var respData = resp.data;
					var cusFieldList = respData.cusFieldList;
					var subCfgList = respData.subCfgList;
					var dataForm=new Object();
					dataForm.id = respData.id
					dataForm.cusName = respData.cusName
					dataForm.cusPhone = respData.cusPhone
					dataForm.cusAddress = respData.cusAddress
					dataForm.cusCreateDate = respData.cusCreateDate
					dataForm.cusCreateUsername = respData.cusCreateUsername
					dataForm.cusOpenId = respData.cusOpenId
					dataForm.cusVisitorId = respData.cusVisitorId
					dataForm.cusVedioVisitorId = respData.cusVedioVisitorId
					dataForm.cusDesc = respData.cusDesc
					dataForm.cusExt1 = respData.cusExt1
					dataForm.cusExt2 = respData.cusExt2
					dataForm.cusExt3 = respData.cusExt3
					dataForm.cusExt4 = respData.cusExt4
					dataForm.cusExt5 = respData.cusExt5
					dataForm.cusExt6 = respData.cusExt6
					dataForm.cusExt7 = respData.cusExt7
					dataForm.cusExt8 = respData.cusExt8
					dataForm.cusExt9 = respData.cusExt9
					dataForm.cusExt10 = respData.cusExt10
					dataForm.cusExt11 = respData.cusExt11
					dataForm.cusExt12 = respData.cusExt12
					dataForm.cusExt13 = respData.cusExt13
					dataForm.cusExt14 = respData.cusExt14
					dataForm.cusExt15 = respData.cusExt15
					dataForm.cusExt16 = respData.cusExt16
					dataForm.cusExt17 = respData.cusExt17
					dataForm.cusExt18 = respData.cusExt18
					dataForm.cusExt19 = respData.cusExt19
					dataForm.cusExt20 = respData.cusExt20
					dataForm.cusExt21 = respData.cusExt21
					dataForm.cusExt22 = respData.cusExt22
					dataForm.cusExt23 = respData.cusExt23
					dataForm.cusExt24 = respData.cusExt24
					dataForm.cusExt25 = respData.cusExt25
					dataForm.cusCreateUsername = respData.cusCreateUsername
					dataForm.cusCreateDate = respData.cusCreateDate
					if(respData.cusLabelList){
						that.tagsList = respData.cusLabelList
						that.labelRate = respData.labelRate
					}else{
						that.tagsList = []
						that.labelRate = ''
					}
					var obj=that.getSessionPopInfo(that.customerPhoneNumber);
					obj.cusFieldList = respData.cusFieldList;
					obj.subCfgList = respData.subCfgList;
					obj.dataForm = dataForm;
					that.caseValue();
				});
			},
			saveCustomerHandle(){
				var that = this;
				if(null == sessionStorage.getItem("user")){

				}else{
					if(!that.updateCustomerDesc){
						 that.$message({
				          message: '请填写修改备注！',
				          type: 'warning'
				        });
				        return;
					}
					if(!that.updateCustomerTempData){
						 that.$message({
				          message: '未获取客户信息！',
				          type: 'warning'
				        });
				        return;
					}
					that.updateCustomerTempData.tenantId = user.tenantid;
					var params = {
						"data":that.updateCustomerTempData,
						"userId":user.userId,
						"userName":user.userName,
						"updateDesc":that.updateCustomerDesc
					}
					// btwApiUtil.post('cc.customer.records.update', params, function(resp) {
					// 	console.log("请求",resp);
					// 	if(resp.code == '0'){
					// 		that.$message({
					//           message: '修改成功！',
					//           type: 'success'
					//         });
					//         that.dialogCustomerUpdateFormVisible = false
					//         that.updateCustomerDesc = ''
					// 		that.updateCustomerTempData = []
					// 	}
					// })

				}
			},
			
			caseValue(){
				var cusFieldList = this.pageData.cusFieldList
				if(typeof(cusFieldList) == "undefined"||cusFieldList.length <= 0){
					return;
				}
				var dataForm = this.pageData.dataForm
				for(var i = 0; i< cusFieldList.length; i++){
					var value = dataForm[cusFieldList[i].colName];
					if(typeof(value) != "undefined" && value != ''){
						this.pageData.dataForm[cusFieldList[i].colName] = this.fomatEnumToCH(value,cusFieldList[i].colExtend)
					}
				}
			},
			fomatEnumToCH:function(val,keys){
				if(typeof(keys) != "undefined" && keys != ''){
					var jsonObject = JSON.parse(keys);
					if(jsonObject.length > 0){
						for(var i=0;i<jsonObject.length;i++){
							if(jsonObject[i].key == val){
								return jsonObject[i].value;
							}
						}
					}
				}
				return val;
			},
			cusClearClickHandler(){
				//客户资料清空
				this.pageData.dataForm={};
			},
			//查询客户资料
			cusSelectHandler(){
				var that = this
				var _dataForm = new Object();
				this.$http.post('/cc/customer/manage/selectOne', {
					cusPhone:this.customerPhoneNumber,
				}).then(resp => {
					console.log("resp===>",resp)
					var respData = resp.data;
					var cusFieldList = respData.cusFieldList;
					var subCfgList = respData.subCfgList;
					var dataForm=new Object();
					dataForm.id = respData.id
					dataForm.cusName = respData.cusName
					dataForm.cusPhone = respData.cusPhone
					dataForm.cusAddress = respData.cusAddress
					dataForm.cusCreateDate = respData.cusCreateDate
					dataForm.cusCreateUsername = respData.cusCreateUsername
					dataForm.cusOpenId = respData.cusOpenId
					dataForm.cusVisitorId = respData.cusVisitorId
					dataForm.cusVedioVisitorId = respData.cusVedioVisitorId
					dataForm.cusDesc = respData.cusDesc
					dataForm.cusExt1 = respData.cusExt1
					dataForm.cusExt2 = respData.cusExt2
					dataForm.cusExt3 = respData.cusExt3
					dataForm.cusExt4 = respData.cusExt4
					dataForm.cusExt5 = respData.cusExt5
					dataForm.cusExt6 = respData.cusExt6
					dataForm.cusExt7 = respData.cusExt7
					dataForm.cusExt8 = respData.cusExt8
					dataForm.cusExt9 = respData.cusExt9
					dataForm.cusExt10 = respData.cusExt10
					dataForm.cusExt11 = respData.cusExt11
					dataForm.cusExt12 = respData.cusExt12
					dataForm.cusExt13 = respData.cusExt13
					dataForm.cusExt14 = respData.cusExt14
					dataForm.cusExt15 = respData.cusExt15
					dataForm.cusExt16 = respData.cusExt16
					dataForm.cusExt17 = respData.cusExt17
					dataForm.cusExt18 = respData.cusExt18
					dataForm.cusExt19 = respData.cusExt19
					dataForm.cusExt20 = respData.cusExt20
					dataForm.cusExt21 = respData.cusExt21
					dataForm.cusExt22 = respData.cusExt22
					dataForm.cusExt23 = respData.cusExt23
					dataForm.cusExt24 = respData.cusExt24
					dataForm.cusExt25 = respData.cusExt25
					dataForm.cusCreateUsername = respData.cusCreateUsername
					dataForm.cusCreateDate = respData.cusCreateDate
					if(respData.cusLabelList){
						that.tagsList = respData.cusLabelList
						that.labelRate = respData.labelRate
					}else{
						that.tagsList = []
						that.labelRate = ''
					}
					var obj=that.getSessionPopInfo(that.customerPhoneNumber);
					obj.cusFieldList = respData.cusFieldList;
					obj.subCfgList = respData.subCfgList;
					obj.dataForm = dataForm;
					that.caseValue();
				});
			},
			cusSaveorUpdateClickHandler(){
				var that=this;
				var obj=this.getSessionPopInfo(this.customerPhoneNumber);
				var _dataForm=obj.dataForm;
				if(JSON.stringify(_dataForm) == "{}"){
					that.$message.error('请填写客户资料表单信息')
					return;
				}
				_dataForm.cusPhone= that.customerPhoneNumber
				//修改
				console.log("_dataForm",_dataForm)
				if(obj.dataForm.id){
					this.$prompt('请输入修改备注', '提示', {
			          confirmButtonText: '确定',
			          cancelButtonText: '取消',
			          inputPattern:  /\S/,
     				  inputErrorMessage: '请填写修改备注'
			        }).then(({ value }) => {
			          _dataForm.updateDesc = value
					  this.$http.post('/cc/customer/manage/update',_dataForm).then(resp => {
						if(resp.data.code === '0') {
							that.$message({
								message: '修改客户资料成功',
								type: 'success',
								duration: 1000,
							});
						} else {
							that.$message.error('修改客户资料失败')
						}
					  })
			        }).catch(() => {});
				}else{
					//新增
					var confirmStr = "是否要新增当前客户资料？";
					this.$confirm(confirmStr, '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						//客户资料保存						
						this.$http.post('/cc/customer/manage/save',_dataForm).then(resp => {
							if(resp.data.code === '0') {
								that.$message({
									message: '新增客户资料成功',
									type: 'success',
									duration: 1000,
								});
							} else {
								that.$message.error('新增客户资料失败')
							}
						})
					}).catch(()=>{});
				}
			},
			//修改子模块客户资料
			dbSelected(row,column,e,item) {
				this.$nextTick(() => {
					this.$refs.subInfoUpdate.init(row,item)
				})
		    },
			// 每页数
			sizeChangeHandle(val) {
				this.limit = val
				this.page = 1
			},
			// 当前页
			currentChangeHandle(val) {
				this.page = val
			},

			//新增子模块客户资料
			addCustomerSubHandle(val){
				this.$nextTick(() => {
					this.$refs.subInfoAdd.init(val)
				})
			},
		},

	}
</script>

<style lang="scss">
	html{
		padding: 0 !important;
	}
	#el-popover-5179 {
		height: 240px！important;
	}

	.el-icon-question {
		font-size: 30px;
		margin-left: 60px;
		color: #409EFF;
	}

	.el-cart-reset {
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
	}

	.tab-ls {
		margin-top: -15px;
		margin-left: -15px;
		margin-bottom: 10px;
		font-size: 14px;
	}

	.icon {
		width: 22px;
		height: 18px;
		fill: currentColor;
		overflow: hidden;
	}

	.body-style {
		font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "\5FAE\8F6F\96C5\9ED1", Arial, sans-serif;
		font-size: 12px;
		font-weight: 500;
		overflow-y: auto;
		display: block;
		/*height: 480px;*/
		clear: both;
	}

	.body-bottom {
		padding: 1px;
		margin-bottom: 6px;
	}
	.el-icon-refresh:active{
		color: #409EFF
	}
	.blueItem .el-form-item__label{
		color: blue;
	}
	.anotherClass{
		display: none;
	}
	.reference_a{
		display: block;
		overflow: hidden;
		font-size: 14px;
		text-overflow: ellipsis;
		white-space: nowrap;
		cursor: pointer;
		color: #33a9fe;
	}
</style>
<style scoped="scoped">
	.subCfgList_title{
		position: relative;
	}
	.subCfgList_title_popover{
		position: absolute;
	    top: -7px;
    	left: 20px;
	}
	.reference_a{
	  display: block;
	  overflow: hidden;
	  font-size: 14px;
	  text-overflow: ellipsis;
	  white-space: nowrap;
	  cursor: pointer;
	  color: #33a9fe;
	}
	.customer_data >>> .el-form-item{
		width: 50%;
		float: left;
	}
</style>
